<template>
	<view class="main">
		<view class="form-box">
			<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoadList">
				<view v-for="item, index in list" :key="index" class="list-card" :class="item.selected?'selected':''"
					@click="handleSelect(item)">
					<view class="list-card-content">
						<text>{{item.meetName}}(房间号: {{item.meetId}})</text>
						<view class="list-card-content-desc">
							<p><span>会议场地：</span>{{item.meetPlace}}</p>
							<p><span>会议人数：</span>{{item.meetingNum}}人</p>
							<p><span>会议时间：</span>{{item.startTime}} 至 {{item.endTime}}</p>
						</view>
					</view>
				</view>
			</van-list>
		</view>
		<view class="footer">
			<van-button block color="#2D75D7" @click="onSubmit">
				确定
			</van-button>
		</view>
	</view>
</template>

<script>
import { hyapList } from '../../../api'
import { parseTime } from '../../../utils/format';
export default {
	data() {
		return {
			loading: false,
			finished: false,
			list: [],
			params: {
				pageNum: 1,
				pageSize: 99,
				beginTimeCondition: parseTime(new Date(), '{y}-{m}-{d}'),
				flCreatorId: ''
			}
		}
	},
	onLoad(e) {
		this.params.flCreatorId = e.flCreateId
	},
	methods: {
		onLoadList() {
			hyapList(this.params).then(res => {
				const list = res.data.rows.map(e => {
					return {
						...e,
						selected: false
					}
				})
				let strs = list.map(e=>e.meetName)
				const removeDupList = [...new Set(strs)];
				this.list = removeDupList.map(item => list.find(i=>i.meetName==item));
				console.log('list', this.list);
				this.loading = false
				this.finished = true
			})
		},
		onSubmit() {
			if (this.list.every(e => !e.selected)) {
				return uni.showToast({
					icon: 'none',
					title: '请选择会议室'
				})
			}
			const item = this.list.find(e => e.selected)
			uni.setStorageSync(`selectRoomData`, JSON.stringify({
				id: item.id,
				name: item.meetName
			}))
			uni.navigateBack()
		},
		handleSelect(item) {
			this.list.forEach(e => e.selected = false)
			item.selected = !item.selected
			console.log('click', item)
		}
	}
}
</script>

<style lang="scss" scoped>
.main {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.form-box {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	padding-top: 10px;
	margin-bottom: 0;
	border-bottom: 0;
	min-height: 0;

	::v-deep .van-list__placeholder {
		height: 100px;
	}
}

.list-card {
	background-color: #fff;
	margin: 15px;
	padding: 15px;
	border-radius: 5px;

	&-header {
		display: flex;
		flex-direction: row-reverse;
	}

	&-content {
		text {
			font-size: 18px;
			font-weight: bold;
			padding-bottom: 10px;
		}

		&-desc {
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			flex-wrap: wrap;
			width: 90%;
			margin-top: 13px;

			p {
				line-height: 26px;
				font-size: 14px;

				span {
					color: #999999;
				}
			}
		}
	}

	&-footer {
		display: flex;
		flex-direction: row-reverse;

		&-button {
			height: 26px;
			width: 80px;
			margin-left: 10px;
		}
	}
}

.fixed {
	position: fixed;
	bottom: 60px;
	right: 20px;

	&-button {
		color: white;
		background: rgb(45, 117, 215);
		border-color: rgb(45, 117, 215);
		box-shadow: 3px 3px 5px black;
		height: 60px;
		width: 60px;
	}
}

.footer {
	position: fixed;
	bottom: 0;
	background-color: #fff;
	width: 95%;
	padding: 10px;
	display: flex;
	justify-content: center;

	::v-deep .van-button--block {
		width: 48%;
	}
}

.selected {
	border: 1px solid #2D75D7;
}
</style>